<template>
  <div class="row columnList">
    <div v-for="column in list" :key="column.id" class="col-4 mb-4">
      <div class="card h-100 shadow-sm">
        <div class="card-body text-center">
          <img
            :src="column.avatar.url"
            :alt="column.title"
            class="rounded-circle border border-light my-3"
          />
          <h5 class="card-title text-truncate">{{ column.title }}</h5>
          <p class="card-text text-left description text-secondary">
            {{ column.description }}
          </p>
          <router-link
            :to="{ name: 'Column', params: { id: column._id } }"
            class="btn btn-outline-primary"
          >
            进入专栏
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {} from 'vue';
export default {
  name: 'ColumnList',
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style lang="scss">
.columnList {
  img {
    height: 50px;
    width: 50px;
  }

  .description {
    line-height: 20px;
    height: 60px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
